<script setup>
import bag from "../assets/mybag/bag-container.png";
import cardPic from "../assets/mybag/cardBg.png";
import myMealBg from "../assets/hong_en.png";
import myMealBgCn from "../assets/hong_cn.png";

import meal_cover from "../assets/meal_cover.png";
import video_cover from "../assets/video_cover.png";
import { useUserStore } from "../store/index";
import { http } from "../services/service";
import { ref, computed } from "vue";
import cardList from "./components/cardList.vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const i18n = useI18n();

const router = useRouter();
const route = useRoute();
const back = () => {
  router.go(-1);
};
const mealCardCounts = ref(0);
const store = useUserStore();

const useCard = () => {
  show.value = true;
};

const confirmUseCard = () => {
  show.value = false;
  http
    .post(`/api/v1/center/useMealCards`, videoContent)
    .then((response) => {
      if (response.data.code === 200) {
        showToast(response.data.message);
        getMeal();
      } else {
        showToast(response.data.message);
      }
    })
    .catch((error) => {
      console.error(error);
    });
};

const background = `url(${bag})`;

const show = ref(false);
let videoContent = new FormData();
videoContent.append("telegramId", store.getUser?.telegramId);
const imagePre = ref();
const videpSrc = ref("");
const imgSrc = ref("");
const afterReadVideo = (file) => {
  videoContent = new FormData();
  videoContent.append("telegramId", store.getUser?.telegramId);
  videoContent.append("videoType", file.file);
  videpSrc.value = file.content;
  showToast(i18n.t("upload_success"));
};

const afterReadImg = (file) => {
  videoContent.append("imageType", file.file);
  imgSrc.value = file.content;
  showToast(i18n.t("upload_success"));
};

const isEN = computed(() => {
  return i18n.locale.value === "en";
});

const getMeal = () => {
  http
    .get(`/api/v1/center/myMealCards?telegramId=${store.getUser?.telegramId}`)
    .then((response) => {
      mealCardCounts.value = response.data.data.number;
    })
    .catch((error) => {
      console.error(error);
    });
};
getMeal();
</script>

<template>
  <van-dialog
    v-model:show="show"
    show-cancel-button
    cancel-button-color="#95979E"
    :confirm-button-text="$t('confirm')"
    :cancel-button-text="$t('cancel')"
    @confirm="confirmUseCard"
    :confirmButtonDisabled="!videpSrc || !imgSrc"
  >
    <div class="withDrawDialog">
      <div class="upload-container">
        <div>{{ $t("upload_video") }}</div>
        <van-uploader
          :after-read="afterReadVideo"
          accept="video/*"
          style="margin-top: 20px"
        >
          <img :src="videpSrc ? videpSrc : video_cover" class="img-cover" />
        </van-uploader>
      </div>
      <div class="upload-container">
        <div>{{ $t("upload_meal_card") }}</div>
        <van-uploader
          :after-read="afterReadImg"
          accept="image/*"
          style="margin-top: 20px"
        >
          <img :src="imgSrc ? imgSrc : meal_cover" class="img-cover" />
        </van-uploader>
      </div>
    </div>
  </van-dialog>
  <div class="container">
    <div class="title">
      <van-icon
        name="arrow-left"
        class="icon-left"
        size="25"
        @click="back()"
      />{{ $t("myMealCard") }}
    </div>
    <div class="myMealBg">
      <img :src="myMealBg" alt="" v-if="isEN" />
      <img :src="myMealBgCn" alt="" v-if="!isEN" />
    </div>
    <div class="container-score">
      <span>{{ $t("current_meal") }}</span
      ><span>{{ mealCardCounts }}</span>
    </div>
    <div class="confirm">
      <van-button type="primary" block @click="useCard()"
        >{{ $t("use_card") }}
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.confirm {
  width: 70%;
  margin: 20px auto;
  button {
    background-image: linear-gradient(to right, #9ba8ff, #4a61f9);
    border-radius: 10px;
  }
}
.container-score {
  width: 80%;
  margin: 40px auto;
  height: 70px;
  display: flex;
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid #9aa7ff;
  border-radius: 10px;
  background: rgba(48, 55, 90, 0.6);
  align-items: center;
  justify-content: space-between;
}

.withDrawDialog {
  padding: 40px;
  font-size: 16px;
  .img-cover {
    width: 80px;
    height: 80px;
  }
  .upload-container {
    color: #595c67;
    border-bottom: 1px solid #595c67;
    padding-bottom: 10px;
    padding-top: 10px;
  }
}

.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.title {
  .icon-left {
    position: absolute !important;
    left: 16px;
    top: 8px;
    cursor: pointer;
  }

  font-size: 17px;
  text-align: center;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.container-tab {
  margin-top: 30px;
}

.myMealBg {
  width: 80%;
  margin: 40px auto;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
